<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>小米登录页面</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        width: 100%;
        height:100%;
        min-height:740px;
        min-width: 400px;
        background-color: #f5f5f5;
    }
    
    main {
        width: 854px;
        height: 620px;
        min-width:400px;
        margin: 112px auto 130px;
        background-color: #ffffff;
        position: relative;
    }
    
    .qrcode {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        opacity: 0.2;
    }
    
    .qrcode:hover {
        opacity: 1;
    }
    
    .logo {
        text-align: center;
        padding-top: 50px;
    }
    
    .title {
        width: 100%;
        margin-top: 22px;
        text-align: center;
        font-size: 30px;
        color: #424242;
    }
    
    .login {
        width: 358px;
        margin: 40px auto 30px;
    }
    
    input[type=text] {
        width: 358px;
        height: 50px;
        border: none;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        padding: 18px 15px;
        font-size: 12px;
        color: #969696;
    }
    
    input:nth-of-type(2) {
        margin-top: 14px;
    }
    
    input[type=button] {
        width: 358px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        border: none;
        margin-top: 40px;
        background-color: #ef5b00;
    }
    
    .other-login {
        width: 385px;
        margin: 0 auto 20px;
        text-align: center;
        font-size: 12px;
        color: #b0b0b0;
        position: relative;
    }
    
    .other-login-left {
        position: absolute;
        top: 7px;
        left: 13px;
        width: 142px;
        height: 1px;
        background-color: #e0e0e0;
    }
    
    .other-login-right {
        position: absolute;
        top: 7px;
        right: 13px;
        width: 142px;
        height: 1px;
        background-color: #e0e0e0;
    }
    
    .other-logo {
        width: 144px;
        margin-bottom: 55px;
        margin-left: 364px;
    }
    
    .other-logo div {
        width: 33%;
        float: left;
    }
    
    .register {
        width: 185px;
        margin: 0 auto;
    }
    
    .register span {
        margin: 55px 10px 0;
        font-size: 12px;
        color: #868686;
        display: inline-block;
    }
    
    .register-center {
        width: 1px;
        height: 12px;
        background-color: #e9e0e9;
        margin: 0 auto;
        display: inline-block;
    }
    
    footer {
        width: 100%;
        /*position: fixed;*/
        margin: 0 auto;
        bottom:0px;
    }
    
    .footer-top {
        width: 232px;
        margin: 0 auto;
        margin-bottom: 20px;
        position: relative;
    }
    
    .footer-top span {
        display: inline-block;
        margin: 0 10px;
        font-size: 12px;
        color: #757575;
        text-align: center;
    }
    
    .footer-top span:nth-of-type(1) {
        color: #333333;
    }
    
    .interval {
        width: 1px;
        height: 12px;
        position: absolute;
        background-color: #757575;
    }
    
    .interval:nth-of-type(1) {
        position: absolute;
        top: 5px;
        left: 46px;
    }
    
    .interval:nth-of-type(2) {
        position: absolute;
        top: 5px;
        left: 94px;
    }
    
    .interval:nth-of-type(3) {
        position: absolute;
        top: 5px;
        left: 161px;
    }
    
    .footer-bottom {
        width: 100%;
        margin-bottom: 30px;
        text-align: center;
        font-size: 12px;
        color: #757575;
    }
    /*媒体查询*/
    
    @media screen and (max-width:856px) {
        main {
            width: 400px;
            height: 486px;
        }
        .logo{
			padding-top: 25px;
        }
        .title {
            font-size: 22px;
        }
        .login {
            margin: 24px auto 30px;
        }
        .other-logo {
            width: 144px;
            margin-bottom: 55px;
            margin-left: 136px;
        }
    }
    </style>
</head>

<body>
    <main>
        <div class="qrcode">
            <img src="./images/二维码.png">
        </div>
        <div class="logo">
            <img src="./images/小米logo.png">
        </div>
        <div class="title">
            小米账号登录
        </div>
        <div class="login">
            <input type="text" placeholder="邮箱/手机号码/小米账号">
            <input type="text" placeholder="密码">
            <input type="button" value="立即登录">
        </div>
        </div>
        <div class="other-login">
            <div class="other-login-left"></div>
            其他方式登录
            <div class="other-login-right"></div>
        </div>
        <div class="other-logo">
            <div class="qqlogo"><img src="./images/qqlogo.png"></div>
            <div class="wblogo"><img src="./images/wblogo.png"></div>
            <div class="zlogo"><img src="./images/zlogo.png"></div>
        </div>
        <div class="register">
            <span class="register-left">注册小米账号</span>
            <div class="register-center"></div>
            <span class="register-right">忘记密码?</span>
        </div>
    </main>
    <footer>
        <div class="footer-top">
            <span>简体</span>
            <div class="interval"></div>
            <span>繁体</span>
            <div class="interval"></div>
            <span>English</span>
            <div class="interval"></div>
            <span>常见问题</span>
        </div>
        <div class="footer-bottom">
            小米公司版权所有-京ICP备10046444-<img src="./images/ghs.png" alt="">京公网安备11010802020134号-京ICP证110507号
        </div>
    </footer>
</body>

</html>
